<template>
    <div>
        <p>{{ title }}</p>
        <p>{{ msg }}</p>
        <hr>
        <input type="text" v-model="title">
        <input type="text" v-model="msg">
        <hr>
        <input type="text" v-model="bookInfo.title">
        <input type="text" v-model="bookInfo.author">
        <input type="text" v-model="bookInfo.year">
    </div>
</template>

<script lang="ts" setup>
import type { PropType } from "vue";
export interface Book{
    title:string
    author:string
    year:number
}
const title=defineModel('title',{type:String, required:true})
const msg=defineModel('msg',{type:String,required:true})
const bookInfo=defineModel('book',{
    type:Object as PropType<Book>,
    default(){
        return {
            title:'第二本书',
            msg:'小美',
            year:3000
        }
    }
})
</script>

<style>
input{
    border: none;
    width: 280px;
    height: 30px;
    border-radius: 15px;
    line-height: 30px;
    font-size: 15px;
    color: white;
    padding-left: 2rem;
    background-color: #409eff;
    margin: 5px;
}
</style>